/** @jsxImportSource @emotion/react */
import { jsx, css, SerializedStyles } from "@emotion/react";
import * as React from "react";
import { Button } from "../Button";
import { Text } from "../Text";
import theme from "../Theme";
import { storiesOf } from "@storybook/react";
import { ToggleDarkMode } from "./ToggleDarkMode";
import {Dialog,DialogContent,DialogHeading,DialogDescription,DialogClose,DialogTrigger} from "../Dialog";
import {Tab, TabPanel, Tabs} from "../Tabs";
import {Pager} from "../Pager";
import {CommitInput, Input, InputGroup, InputLine} from "../Form";
import {useTheme} from "../Theme/Providers";

export const ModalStories = storiesOf("Dialog", module)
    .add("长内容", () => {
        return <Demo />;
    })
    .add("非受控", () => {
        return <Demo2 mobileFullscreen />;
    })
    .add("短小的", () => {
        return <DemoSimple mobileFullscreen />;
    })
    .add("双层模态", () => {
        return <TwoLayerStateModual mobileFullscreen />;
    }).add("Pager+Tabs+Dialog", () => {
        return <PagerNested />;
    });


function Demo(props: { mobileFullscreen?: boolean }) {
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <Button onClick={() => setShow(true)}>Show显示模态页面1</Button>
        <div style={{ height: "58vh" }} />
      <Button onClick={() => setShow(true)}>Show显示模态页面02</Button>
        <div style={{ height: "15vh" }} />
      <Button onClick={() => setShow(true)}>Show显示模态页面03</Button>
        <div style={{ height: "72vh" }} />
      <Button onClick={() => setShow(false)}>Show显示模态页面04false</Button>
      <hr/>
        <Button onClick={() => setShow(false)}>Show显示模态页面最后一行</Button>

        <Dialog open={show} onOpenChange={setShow}>
            <DialogContent >
                <DialogHeading>
                    Hello world
                </DialogHeading>
                <DialogDescription>
                    <div css={{ padding: "1.5rem" }}>
                        <Text>
                            Mollit fugiat ex irure tempor. Cillum non Lorem et enim anim est.
                            Cillum adipisicing tempor adipisicing pariatur ex ut excepteur.
                            Lorem Lorem minim deserunt est. Deserunt ea est ad reprehenderit
                            fugiat dolor eiusmod exercitation. Consequat esse minim nulla
                            commodo voluptate labore incididunt in deserunt ea exercitation enim
                            commodo ad. Do Lorem voluptate nisi aliquip amet anim voluptate
                            laborum.
                        </Text>
                        <p>测试文本1</p>
                        <p>测试文本2</p>
                        <p>测试文本3</p>
                        <p>测试文本4</p>
                        <p>测试文本5</p>
                        <p>测试文本6</p>
                        <p>测试文本7</p>
                        <p>测试文本8</p>
                        <p>测试文本9</p>
                        <p>测试文本10</p>
                        <p>测试文本11</p>
                        <p>测试文本12</p>
                        <p>测试文本13</p>
                        <p>测试文本14</p>
                        <p>测试文本15</p>
                        <p>测试文本End</p>
                        <div
                            css={{
                                marginTop: theme.spaces.lg,
                               display: "flex",
                                justifyContent: "flex-end"
                            }}
                        >
                            <Button variant="ghost">Cancel</Button>
                            <Button css={{ marginLeft: theme.spaces.sm }} intent="primary"
                                    onClick={() => setShow(false)}
                            >
                                Save对话框结束
                            </Button>
                        </div>
                    </div>

                </DialogDescription>
                <DialogClose>Close</DialogClose>
            </DialogContent>
        </Dialog>
    </div>
  );
}

function DemoSimple(props: { mobileFullscreen?: boolean }) {
    const [show, setShow] = React.useState(false);

    return (
        <div>
            <Button onClick={() => setShow(true)}>Show显示模态页面1</Button>
            <div style={{ height: "58vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面02</Button>
            <div style={{ height: "15vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面03</Button>
            <div style={{ height: "72vh" }} />
            <Button onClick={() => setShow(false)}>Show显示模态页面04false</Button>
            <Dialog open={show} onOpenChange={setShow}>
                <DialogContent >
                    <DialogHeading>
                        配置选择选项目
                    </DialogHeading>
                    <DialogDescription>
                        <div>
                            <Text>
                                Mollit fu而且翁群翁 non Lorem et enim anim est.
                                Cillum adipisicing tempor adipi2 sicing pariaturex ut excepteur.
                                Lorem Lorem minim deserunt est. Deserunt ea est ad23 repreh enderit
                                co我问问mmodo voluptate董生端合是前身 labore
                            </Text>
                        </div>
                    </DialogDescription>
                    <DialogClose>关闭</DialogClose>
                </DialogContent>
            </Dialog>
            <hr/>
            <Button onClick={() => setShow(false)}>Show显示模态页面最后一行</Button>
        </div>
    );
}


function TwoLayerStateModual(props: { mobileFullscreen?: boolean }) {
    const [show, setShow] = React.useState(false);

    return (
        <div>
            <Button onClick={() => setShow(true)}>Show显示模态页面1</Button>
            <div style={{ height: "58vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面02</Button>
            <div style={{ height: "15vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面03</Button>
            <div style={{ height: "72vh" }} />
            <Button onClick={() => setShow(false)}>Show显示模态页面04false</Button>
            <Dialog open={show} onOpenChange={setShow}>
                <DialogContent >
                    <DialogHeading>
                        配置选择选项目
                    </DialogHeading>
                    <DialogDescription>
                        <div>
                            <Text>
                                Mollit fugiat ex irure tempor. Cillum non Lorem et enim anim est.
                                Cillum adipisicing tempor adipi2 sicing pariaturex ut excepteur.
                                Lorem Lorem minim deserunt est. Deserunt ea est ad23 repreh enderit
                                commodo voluptate董生端合是前身 labore
                            </Text>
                            <p> 第二层开始.</p>
                            <DemoSimple mobileFullscreen />
                            <p> 第二层结束.</p>
                        </div>
                    </DialogDescription>
                    <DialogClose>关闭</DialogClose>
                </DialogContent>
            </Dialog>
            <hr/>
            <Button onClick={() => setShow(false)}>Show显示模态页面最后一行</Button>
        </div>
    );
}


function Demo2(props: { mobileFullscreen?: boolean }) {
    const [show, setShow] = React.useState(false);

    return (
        <div>
            <Button onClick={() => setShow(true)}>Show显示模态页面1</Button>
            <div style={{ height: "58vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面02</Button>
            <div style={{ height: "15vh" }} />
            <Button onClick={() => setShow(true)}>Show显示模态页面03</Button>
            <div style={{ height: "72vh" }} />
            <Button onClick={() => setShow(false)}>Show显示模态页面04false</Button>
            <hr/>
            <Button onClick={() => setShow(false)}>Show显示模态页面最后一行</Button>

            <Dialog>
                <DialogTrigger>开动</DialogTrigger>
                <DialogContent >
                    <DialogHeading>
                        Hello world
                    </DialogHeading>
                    <DialogDescription>
                        <div css={{ padding: "1.5rem" }}>
                            <p>测试文本9</p>
                            <p>测试文本10</p>
                            <p>测试文本11</p>
                            <p>测试文本12</p>
                            <p>测试文本13</p>
                            <p>测试文本14</p>
                            <p>测试文本15</p>
                            <p>测试文本End</p>
                            <div
                                css={{
                                    marginTop: theme.spaces.lg,
                                    display: "flex",
                                    justifyContent: "flex-end"
                                }}
                            >
                                <Button variant="ghost">Cancel</Button>
                                <Button css={{ marginLeft: theme.spaces.sm }} intent="primary"
                                        onClick={() => setShow(false)}
                                >
                                    Save对话框结束
                                </Button>
                            </div>
                        </div>

                    </DialogDescription>
                    <DialogClose>Close</DialogClose>
                </DialogContent>
            </Dialog>
        </div>
    );
}

//全屏对话框+Pager可拉动 :  storybook工具條占用部分高度！
function PagerNested(props) {
    const [show, setShow] = React.useState(false);
    const [value, setValue] = React.useState(0);
    const theme = useTheme();
    const [filter, setFilter] = React.useState<any>( {} );
    const [form, setForm] = React.useState({ username: "", password: "",
          mobile:''} as any);
    async function doLogin(e: React.FormEvent  | Event)
    {
        console.log("点了form",form);
    }
    return (
        <div>
            <Button onClick={() => setShow(true)}>Pager嵌入到Dialog底下的</Button>
            <Dialog open={show} onOpenChange={setShow}>
                <DialogContent style={{
                        margin: 0,
                        width: "100vw",
                        maxWidth: "100vw",   //需要覆盖组件默认值
                        height: "100vh",
                        padding: 0,         //覆盖默认
                        border: 'none',       //默认2px 3px
                        [theme.mediaQueries.md]: {
                            border: 'none',
                        },
                        [theme.mediaQueries.lg]: {
                            maxWidth: "100vw",
                        },
                    }}
                   layStyle={{
                       overflowY: 'hidden',     //【极特殊情形】地图不要Y轴线的滚动了。 地图自身会就能滚动和缩放
                   }}
                >
                    <DialogHeading>
                        Hello world
                    </DialogHeading>
                    <DialogDescription>
                        <div css={{  }}>
                            <div className="PtConte"
                                css={{
                                    maxWidth: "100vw",
                                    //width: '100%',
                                    height: "100%",
                                    //minHeight: "100vh",
                                    background: theme.colors.background.tint1
                                }}
                            >
                                <Tabs value={value} onChange={i => setValue(i)}>
                                    <Tab id="2">首页courseCourse events</Tab>
                                    <Tab id="settings">第二Settings</Tab>
                                    <Tab id="4">templatesgenduode1页面</Tab>
                                    <Tab id="courses">四Courses</Tab>
                                    <Tab id="5">Team members最后</Tab>
                                </Tabs>
                                <Pager   lazyLoad={false}  noBind={false}
                                         value={value}   onRequestChange={i => setValue(i)}
                                         style={{
                                             height: '65vh',
                                         }}
                                >
                                    <TabPanel id="company"
                                              css={{
                                                  height: '100%',
                                              }}
                                    >
                                        <TabContent i={0}/>
                                    </TabPanel>

                                    <TabPanel id="company2"
                                              css={{
                                                  height: '100%',
                                              }}
                                    >
                                        <TabContent i={3}/>
                                    </TabPanel>
                                    <TabPanel id="company4"
                                              css={{
                                                  height: '100%',
                                              }}
                                    >
                                        <InputLine label={`地址:`}>
                                            <CommitInput type="search" placeholder="搜索,可模糊"
                                                         value={filter.address || ''}  onSave={txt => setFilter( { ...filter, address: txt }) }
                                            />
                                        </InputLine>
                                        <form  method="post"
                                               onSubmit={e =>{ doLogin(e) } }>
                                            <div   css={{  marginTop: theme.spaces.md   }}>
                                                <InputGroup  label={"账户"}>
                                                    <Input  required  type="search"
                                                            onChange={e => {
                                                                setForm({ ...form, username: e.currentTarget.value });
                                                            }}
                                                            value={form.username}
                                                            inputSize="md"
                                                            placeholder="账户"
                                                    />
                                                </InputGroup>
                                                <div css={{ display: "flex", justifyContent: "flex-end" }}>
                                                    <Button
                                                        block
                                                        component="button"
                                                        css={{
                                                            textAlign: "center",
                                                            width: "100%",
                                                            marginTop: theme.spaces.md
                                                        }}
                                                        type="submit"
                                                        size="md"
                                                        intent="primary"
                                                    >
                                                        登录1submit
                                                    </Button>
                                                    <Button
                                                        block
                                                        component="button"
                                                        css={{
                                                            textAlign: "center",
                                                            width: "100%",
                                                            marginTop: theme.spaces.md
                                                        }}
                                                        size="md"
                                                        intent="primary"
                                                        onPress={e =>{ console.log("点onPress",form);
                                                            doLogin(e) } }
                                                    >
                                                        登录2onPress
                                                    </Button>
                                                </div>
                                            </div>
                                        </form>
                                    </TabPanel>
                                </Pager>
                            </div>
                            <div
                                css={{
                                    marginTop: theme.spaces.lg,
                                    display: "flex",
                                    justifyContent: "flex-end"
                                }}
                            >
                                <Button variant="ghost">Cancel</Button>
                                <Button css={{ marginLeft: theme.spaces.sm }} intent="primary"
                                        onClick={() => setShow(false)}
                                >
                                 Save结束
                                </Button>
                            </div>
                        </div>
                    </DialogDescription>
                    <DialogClose  style={{
                            position: 'absolute',
                            top: `calc(100vh - 1.5rem - 4px)`,     //【严格计算】地图重叠定位；
                            zIndex: theme.zIndices.modal + 3,
                        }}
                    >
                     Close
                    </DialogClose>
                </DialogContent>
            </Dialog>
        </div>
    );
}

const pages = [
    'https://images.pexels.com/photos/62689/pexels-photo-62689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/733853/pexels-photo-733853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/4016596/pexels-photo-4016596.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/351265/pexels-photo-351265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
]
function TabContent({i}: any) {
    return (   <div style={{
        touchAction: 'none',
        backgroundSize: 'cover',
        backgroundRepeat: `no-repeat`,
        backgroundPosition: `center center`,
        width: "100%",
        height: "100%",
        boxShadow: `0 62.5px 125px -25px rgba(50, 50, 73, 0.5), 0 37.5px 75px -37.5px rgba(0, 0, 0, 0.6)`,
        display: "flex",
        flexDirection: "column",
        alignSelf: "stretch",
        justifyContent: "flex-start",
        flexShrink: 0,
        overflow: "auto",
        outline: "none",
        backgroundImage: `url(${pages[i]})` ,
    }}>
    </div>);
}
